<script setup lang="ts">
import { ref } from 'vue';
import { useLargenScreen } from '@/composables/useLargenScreen';
import headerNavBar from '@/components/headerNavBar.vue';
import { useNavBarHeight } from '@/composables/useNavBarHeight';
import bg1 from '@/assets/images/rewardLedger/bg_1.webp';
import ico1 from '@/assets/images/IntegralLedger/ico_1.png';
import ico2 from '@/assets/images/rewardLedger/ico_2.png';
import type { OnPage } from '@/composables/useList';
import { useList } from '@/composables/useList';
import { useRouter } from 'vue-router';
import { SendGiftList } from '@/common/api/rewardLedger';
import type { Item } from './types';
import { useCacheScrollTop } from '@/composables/useCacheScrollTop';
import { copyHandler } from '@/utils/util';
import { showToast } from 'vant';

// 缓存页面滚动位置
useCacheScrollTop('.rewardLedger', 'rewardLedger');

const { navBarHeight } = useNavBarHeight();
const [largenScreen] = useLargenScreen();
const router = useRouter();

const keyword = ref(''); // 搜索关键字

const server: OnPage = async (listConfig) => {
  const res = await SendGiftList({ ...listConfig, keyword: keyword.value });
  const { list } = res.result;
  console.log('SendGiftList: ', list);
  return list;
};

const { list, loading, finished, error, refreshing, onLoad, onRefresh } = useList<Item>(server, true);

const handleOpenDetail = (uid: string) => {
  router.push(`/rewardLedgerDetail?uid=${uid}`);
};

// 文本复制
const copyText = (text: string) => {
  const { errMsg } = copyHandler({ data: text });
  if (errMsg.indexOf('ok') > -1) {
    showToast('复制成功');
  }
  console.log(errMsg);
};
</script>
<template>
  <div
    class="rewardLedger bg-[length:100%_auto] bg-no-repeat scroll-hidden"
    :class="{ boxShadow: largenScreen }"
    :style="{ backgroundImage: `url(${bg1})`, paddingTop: `${navBarHeight}px` }"
  >
    <headerNavBar :placeholder="false" transparent scroll-el=".rewardLedger" />
    <van-config-provider :theme-vars="{ pullRefreshHeadTextColor: 'white' }">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <template #loading>
          <div class="text-white flex items-center justify-center">
            <van-loading type="spinner" color="#ffffff" size="16" />
            <span class="ml-1">加载中...</span>
          </div>
        </template>
        <!-- 搜索框 -->
        <div class="mx-4 mt-5 rounded-full bg-white overflow-hidden flex items-center p-1">
          <van-image class="ml-2" width="16" height="16" :src="ico1" />
          <div class="flex-1 px-2">
            <van-field
              class="!p-0"
              v-model="keyword"
              placeholder="搜索手机号/邀请码/昵称"
              clearable
              @keyup.enter="onRefresh"
            />
          </div>
          <van-button
            class="!px-4"
            type="primary"
            size="small"
            round
            color="#FF3532"
            @click="onRefresh"
            :disabled="loading"
            >搜索</van-button
          >
        </div>
        <!-- 列表 -->
        <van-list
          v-model:loading="loading"
          v-model:error="error"
          :finished="finished"
          finished-text="没有更多了"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
        >
          <div class="px-4 pt-5 pb-5">
            <div class="p-2 mb-2 bg-white rounded-lg" v-for="(item, i) in list" :key="i">
              <div class="flex items-center">
                <van-image
                  radius="10"
                  width="55"
                  height="55"
                  lazy-load
                  fit="cover"
                  :src="item.headimg + '?x-oss-process=image/resize,m_fixed,h_55,w_55'"
                />
                <div class="flex-1 pl-3">
                  <div class="text-sm mb-1">{{ item.nickname }}</div>
                  <div class="text-xs flex items-center" @click="copyText(item.code)">
                    <span class="text-[#999999] mr-1">邀请码:{{ item.code }}</span>
                    <van-icon name="link-o" />
                  </div>
                </div>
                <div class="text-right">
                  <div class="text-xs text-[#B9B9B9] mb-1" @click="handleOpenDetail(item.uid)">
                    查看全部 <van-icon name="arrow" />
                  </div>
                  <div class="text-xs">
                    <span class="text-[#999999] mr-1">{{ item.crt_time }}</span>
                  </div>
                </div>
              </div>
              <div class="bg-[#FFF5F7] flex items-center px-2 py-[6px] mt-3 rounded-lg">
                <span class="text-xs text-[#999999]">向</span>
                <van-image class="mx-1" width="14" height="14" :src="ico2" />
                <van-image
                  radius="10"
                  width="38"
                  height="38"
                  lazy-load
                  fit="cover"
                  :src="item.to_headimg + '?x-oss-process=image/resize,m_fixed,h_38,w_38'"
                />
                <div class="pl-2">
                  <div class="text-xs flex-1">
                    <span class="mr-1">{{ item.to_nickname }}</span>
                    <span class="text-[#999999]">打赏礼物消耗</span>
                    <span class="text-[#EC2D69]">{{ item.price }}积分</span>
                  </div>
                  <div class="text-xs mt-1 flex items-center" @click="copyText(item.to_code)">
                    <span class="text-[#999999] mr-1">邀请码:{{ item.to_code }}</span>
                    <van-icon name="link-o" />
                  </div>
                </div>
              </div>
            </div>

            <van-empty class="!pt-14" v-if="finished && !list.length" />

            <!-- 底部安全区 -->
            <div class="van-safe-area-bottom"></div>
          </div>
        </van-list>
      </van-pull-refresh>
    </van-config-provider>
  </div>
</template>
<style lang="less" scoped>
.rewardLedger {
  overflow-y: auto;
  background-color: #f6f6f6;
  height: 100vh;
  max-width: 450px;
}
.rewardLedger.boxShadow {
  margin: 3vh auto;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
</style>
